<template>
	<div v-loading="load.load">
		<userDistribution :total_channel="total_channel" />
		<div class="adminMain">
			<el-row class="tableBtnTop">
				<el-select v-model="field.id" placeholder="请选择" class="filter">
					<el-option v-for="(item, index) in field.list" :label="item.label" :key="item.key" :value="item.value"></el-option>
				</el-select>
				<div class="search">
					<el-input placeholder="请搜索" v-model="keyword" @keyup.enter.native="page = 1;getList()">
						<i slot="prefix" class="el-input__icon el-icon-search"></i>
					</el-input>
				</div>
				<el-date-picker type="daterange" v-model="time" value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd" style="width:400px;margin-right:15px;" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']" popper-class="index_promotionData_daterange_popper_class"></el-date-picker>
				<el-button class="f1" @click="getList">立即搜索</el-button>
			</el-row>
			<el-table :data="tableData" border @filter-change="filterChange">
				<el-table-column prop="id" label="ID" :show-overflow-tooltip="true" fixed width="150"></el-table-column>
				<el-table-column prop="" label="用户" :show-overflow-tooltip="true" :filter-multiple="false" :filters="filerComputed('sort').select" :filtered-value="filerComputed('sort').value" column-key="sort">
					<template slot-scope="scope">
						<div class="device_view flex">
							<a class="userHead" target="_blank" :href="`/user/detail?id=${scope.row.id}`">
								<img :src="scope.row.avatar" v-if="scope.row.avatar" class="square" />
								{{ scope.row.nickname || "-" }}
							</a>
						</div>
					</template>
				</el-table-column>
				<el-table-column prop="" label="累计使用">
					<template slot-scope="scope">
						0次
					</template>
				</el-table-column>
				<el-table-column prop="" label="累计消费" :show-overflow-tooltip="true">
					<template slot-scope="scope">
						<font color="#F30">{{ scope.row.total_money }}</font>
						<span style="font-size: 12px;color: #999" v-if="scope.row.vip_info && scope.row.vip_info.expire_time">到期：{{ app.toTime(scope.row.vip_info.expire_time, "YYYY/MM/DD hh:mm:ss") }}</span>
					</template>
				</el-table-column>
				<el-table-column prop="" label="注册渠道" :show-overflow-tooltip="true" :filters="filerComputed('channel').select" :filtered-value="filerComputed('channel').value" column-key="channel">
					<template slot-scope="scope">{{ scope.row.channel || "无" }}</template>
				</el-table-column>
				<adsTableColumn :ascribeList="filerComputed('ascribe_type').select" :ascribeIds="filerComputed('ascribe_type').value"></adsTableColumn>
				<el-table-column prop="" label="注册方式" :show-overflow-tooltip="true" :filters="filerComputed('register_source').select" :filtered-value="filerComputed('register_source').value" column-key="register_source">
					<template slot-scope="scope">
						{{ scope.row.register_source || "-" }}
					</template>
				</el-table-column>
				<el-table-column prop="" label="注册时间" :show-overflow-tooltip="true">
					<template slot-scope="scope">{{ scope.row.created_at || "-" }}</template>
				</el-table-column>
		        <el-table-column prop="user" label="操作" :show-overflow-tooltip="true">
		            <template slot-scope="scope">
		                <div class="tableBtn">
		                    <a :href="`/user/detail?id=${scope.row.id}`" class="color" target="_blank">查看</a>
		                </div>
		            </template>
		        </el-table-column>
			</el-table>
			<div class="total_flex flex">
				统计：<div class="item">当前页有{{ pageCount.openSum }}个人开通会员，消费金额{{ pageCount.amountSum }}元，有{{ pageCount.useSum }}人（占比{{ (pageCount.useSum / tableData.length * 100).toFixed(2) }}%）使用过软件</div>
			</div>
			<div class="paginationBlock">
				<el-pagination layout="prev, pager, next, sizes, total" @size-change="getList" @current-change="getList" :total="total" :current-page.sync="page" :page-size.sync="limit" ></el-pagination>
			</div>
		</div>
	</div>
</template>

<script>
	import adsTableColumn from '@/components/adsTableColumn.vue';
	import userDistribution from '@/components/userDistribution.vue';
	export default {
		components: { adsTableColumn, userDistribution },
		data() {
			return {
				
				// 是否处于加载中
				load: { load: false },
				
				// 统计数据
				total_channel: null,
				
				// 表格数据
				tableData: [],
				
				// 当前页数
				page: this.$route.query.page ? parseInt(this.$route.query.page) : 1,
				
				// 每页条数
				limit: this.$route.query.limit ? parseInt(this.$route.query.limit) : this.app.limit,
				
				// 总数
				total: this.$route.query.total ? parseInt(this.$route.query.total) : 0,
				
				// 可选择的搜索类型列表
				field: {
					list: [],
					id: this.$route.query.field || "",
				},
				
				// 搜索关键词
				keyword: this.$route.query.keyword || "",
				
				// 时间
				time: this.$route.query.time ? this.$route.query.time.split(",") : [],
				
				// 过滤某些类型
				filter: [],
				
				// 当前支持哪些AI功能
				aifunctions: [],
				
				// 统计当前页数据
				pageCount: {
				    amountSum: "-",
				    openSum: "-",
				    useSum: "-",
				},
				
			};
		},
		computed: {
			
			// 过滤类型筛选
			filerComputed(){
				return function(key){
					let filerItem = { select: [], value: [] };
					this.filter.filter((item, index) => {
						(item.field === key) && (filerItem = item);
					});
					return filerItem;
				}
			},
			
		},
		methods: {
				
			// 加载列表
			getList(){
				let _this = this;
				let filterData = {}; //筛选的参数
				_this.filter.map((item) => filterData[item.field] = item.value.join(","));
				_this.app.ajax({
					url: "/admin/customer/index",
					method: "POST",
					data: Object.assign({
						keyword: _this.keyword,
						field: _this.field.id,
						limit: _this.limit,
						page: _this.page,
						time: _this.time ? _this.time.join(",") : "",
					}, filterData),
					load: _this.load,
					changeUrl: true,
					success(res){
						_this.total_channel = res.data.total_channel;
						_this.total = res.data.total;
						_this.tableData = res.data.list;
						_this.field.list = res.data.fields;
						_this.field.id = _this.field.id || res.data.fields[0].value;

						res.data.filter.map((item) => {
							item.value = _this.$route.query[item.field] ? _this.$route.query[item.field].split(",") : [];
						});
						_this.filter = res.data.filter;
						
						
						// 统计一下当前页的数量
						let amountSum = 0;
						let openSum = 0;
						let useSum = 0;
						res.data.list.map((item, index) => {
							amountSum += parseInt(item.total_money);
							openSum += parseInt(item.total_money) > 0 ? 1 : 0;
							useSum += item.total_used.count > 0 ? 1 : 0;
						});
						_this.pageCount = {
						    amountSum: amountSum,
						    openSum: openSum,
							useSum: useSum
						}
					}
				})
			},
			
			// 筛选变更
			filterChange(e) {
				this.filter.map((item) => {
					if(item.field === Object.keys(e)[0]){
						item.value = e[item.field];
					}
				});
				
				this.$nextTick(() => {
					this.page = 1;
					this.getList();
				});
			},
			
		},
		mounted(){
			let _this = this;
			_this.getList();
			_this.app.getAifunctions().then((e) => {
				_this.aifunctions = e;
			});
		}
	};
</script>

<style lang="scss" scoped>
	.userLog{
		.item{
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			font-size: 12px;
			margin-bottom: 15px;
			&:nth-last-child(1){
				margin-bottom: 0;
			}
			.left{
				color: #767676;
			}
			.right{
				color: #333;
				margin-left: 12px;
			}
		}
	}
</style>